<template>
    <div :class="['magic',enLayout]">
        <div class="imageContainer" :key="index" v-if="item&&item.props&&item.props.images"
             v-for="(image,index) in item&&item.props&&item.props.images">
            <img :src="image||'http://qiniu.liumingtai.com/157707089201301736.png'" alt=""
            />
        </div>
        <div v-if="!(item&&item.props&&item.props.images)" class="imageContainer">
            <img src="http://qiniu.liumingtai.com/157707089201301736.png" alt=""
            />
        </div>
        <div v-if="!(item&&item.props&&item.props.images)" class="imageContainer">
            <img src="http://qiniu.liumingtai.com/157707089201301736.png" alt=""
            />
        </div>


    </div>
</template>
<script>

    import {createProp} from "../util/util";

    export default {
        data() {
            return {
                form: {
                    table: [],
                    from: 0,
                    tableLoading: false,
                    total: 0,
                },

            }
        },
        computed: {
            enLayout() {
                if (this.item && this.item.props && this.item.props.layout === '二小') {
                    return 'c2'
                }
                if (this.item && this.item.props && this.item.props.layout === '三小') {
                    return 'c3'
                }
                if (this.item && this.item.props && this.item.props.layout === '上大下二小') {
                    return 'r1c2'
                }
                return 'c2'

            }
        },
        props: {
            item: createProp([Object], {
                props: {}
            })
        }
    }

</script>
<style lang="scss" scoped>
    .imageContainer {
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            max-width: 100%;
            max-height: 100%;
        }
    }

    .c2 {
        display: flex;

        .imageContainer {
            width: 50%;
        }
    }

    .c3 {
        display: flex;

        .imageContainer {
            width: 33.333%;
        }
    }

    .r1c2 {
        .imageContainer {
            &:nth-child(3n+1) {
                width: 100%;
                height: 200px;
            }

            &:nth-child(3n+2) {
                width: 50%;
                height: 100px;
            }

            &:nth-child(3n) {
                width: 50%;
                height: 100px;
            }
        }

    }
</style>
